<template>
  <!--  设备详情 -->
  <div style="width: 100%; height: 100%; overflow: hidden auto">
    <split-title text="基础信息" />
    <descriptions :col-span="12" :columns="descriptionsList.slice(0, 10)" :data-source="details" />
    <split-title text="在线状态" style="margin-top: 20px" />
    <!--    <descriptions :col-span="12" :columns="descriptionsList.slice(10, 11)" :data-source="details" />-->
    <div>
      <span style="color: rgba(255, 255, 255, 0.5)">是否在线：</span
      ><span
        style="display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 5px"
        :style="{ background: details.is_online ? 'rgb(50,204,151)' : 'rgb(204,50,50)' }"
      ></span
      ><span style="font-size: 18px" :style="{ color: details.is_online ? 'rgb(50,204,151)' : 'rgb(204,50,50)' }">{{
        details.is_online ? '在线' : '离线'
      }}</span>
    </div>
    <!--油烟监测详情-->
    <template v-if="details.type == 'D0114_9'">
      <split-title :text="`最新监测数据（最新监测时间${details.last_online_time || '-'}）`" style="margin-top: 20px" />
      <descriptions :col-span="12" :columns="descriptionsList.slice(-6, -3)" :data-source="details" />
    </template>
    <!--电气火灾-->
    <template v-if="details.type == 'D0114_5'">
      <split-title :text="`最新监测数据（最新监测时间${details.last_online_time || '-'}）`" style="margin-top: 20px" />
      <descriptions :col-span="12" :columns="descriptionsList.slice(-3)" :data-source="details" />
    </template>
  </div>
</template>

<script>
import { devIotDetails } from '@gis/lib/api';
import { useDicDataStore } from '@gis/lib/pinia/dicData.js';
import SplitTitle from '@gis/lib/components/splitter/split-title.vue';

export default {
  name: 'iot-details',
  components: { SplitTitle },
  props: {
    id: { type: String },
  },
  data() {
    return {
      details: {},
      descriptionsList: [
        { label: '所属区域', key: 'area_name' },
        { label: '设备名称', key: 'name' },
        { label: '设备类型', key: 'type', format: (v) => this.typeObj[v] },
        { label: '安装地址', key: 'install_address' },
        { label: '标识', key: 'identification' },
        // { label: '第三方标识', key: 'thirdparty_identification' },
        { label: '经度', key: 'longitude' },
        { label: '纬度', key: 'latitude' },
        { label: '创建时间', key: 'create_time' },
        // { label: '视频编号', key: 'stream_url' },
        { label: '更新时间', key: 'modify_time' },
        { label: '备注', key: 'remark' },
        {
          label: '是否在线',
          key: 'is_online',
          format: (v) =>
            v ? `<div style="color: rgb(50,204,151)">在线</div>` : `<div style="color: rgb(204,50,50)">离线</div>`,
        },
        { label: '油烟含量', key: 'lampblack' },
        { label: '颗粒物含量', key: 'pm' },
        { label: '非甲烷总经含量', key: 'nh' },
        { label: 'a项电压', key: 'UA' },
        { label: 'b项电压', key: 'UB' },
        { label: 'c项电压', key: 'UC' },
      ],
    };
  },
  computed: {
    typeObj() {
      const { getDicData } = useDicDataStore();
      return getDicData('D0114');
    },
  },
  created() {
    this.getDevIotDetails();
  },
  methods: {
    async getDevIotDetails() {
      const params = { id: this.id };
      const { data = {} } = await devIotDetails(params);
      this.details = Object.assign({}, data);
    },
  },
};
</script>

<style scoped></style>
